<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_事件监听</title>
</head>
<body>
<button onclick="alert('按钮1被点击了')">按钮1</button>
<button id="btn">按钮2</button>
<hr>
<h4>今天星期三</h4>
<span>震惊：端午节竟然要过节</span>
<h4>今天星期三</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ea eaque laudantium minus quam, quo quod
        vero voluptatum? Aspernatur atque aut blanditiis consequatur cupiditate deleniti distinctio illo, perferendis
        placeat rem.
    </div>
    <div>Atque commodi consequuntur debitis doloremque eos facere iste neque nulla numquam optio, porro quas similique,
        suscipit, unde vel veritatis voluptas voluptatum? Blanditiis delectus doloremque ea illum itaque nesciunt
        nostrum suscipit.
    </div>
    <div>Aperiam delectus, deleniti distinctio doloremque fugit illo impedit in, inventore, mollitia possimus
        praesentium quibusdam quod recusandae saepe voluptatum? Accusantium, amet blanditiis debitis eligendi est labore
        magnam maxime temporibus ut voluptas.
    </div>
    <div>A, accusantium aperiam assumenda at commodi consequatur eius id illo iusto magni modi mollitia nihil
        perferendis quae quaerat quia quibusdam reiciendis repellendus rerum sint temporibus veniam, voluptate? Error,
        iure, minus?
    </div>
    <div>Accusamus beatae, dolores laboriosam maiores nam nisi nulla placeat porro quam sed similique soluta, tempore. A
        aliquid at consequatur consequuntur cupiditate explicabo facere in iure non, obcaecati repellat, reprehenderit
        soluta!
    </div>
    <div>Aut, autem consectetur consequuntur dignissimos, dolores excepturi minus modi neque optio perferendis provident
        quos rerum sit vel voluptatum. Distinctio enim labore mollitia natus. Consequuntur ex facilis odio sequi vero.
        Corporis?
    </div>
    <div>Dolore dolorem ducimus, eos est eum eveniet fuga illo illum laboriosam laborum minus natus nesciunt nostrum
        praesentium, quaerat quia quis veritatis voluptate. Alias dolores illo nobis non sapiente sed sit?
    </div>
    <div>Accusamus aliquid aut doloremque eligendi enim illo impedit, incidunt ipsa iste, itaque laboriosam nihil non
        odit perferendis porro possimus, quis sapiente totam vel vitae. Id libero minus nostrum repellendus ullam?
    </div>
    <div>Accusantium aliquam libero nulla quas repudiandae sequi temporibus tenetur? A accusamus accusantium aut
        consectetur, exercitationem odit similique soluta tempore vitae voluptate! Dolorum et hic minus modi neque,
        optio sit ut.
    </div>
    <div>Accusamus aut natus possimus? Architecto, aspernatur ea esse, fuga impedit labore laudantium molestias omnis,
        quis quo reprehenderit sunt ut voluptatem. Adipisci, aperiam facere itaque magni minus quo rem voluptas. Culpa.
    </div>
    <div>A consectetur cumque dignissimos dolore illo ipsa nam nulla officiis quam, quasi quia temporibus voluptate?
        Culpa distinctio eveniet excepturi fugit illum iste minima molestias optio quis reiciendis. Aliquam, dolorem,
        eaque!
    </div>
    <div>Distinctio facere fugiat fugit magnam magni minus nemo saepe voluptates. Accusantium amet laboriosam
        voluptates. Beatae commodi consequuntur, delectus ea inventore libero, maxime, nesciunt numquam rem rerum sit
        velit voluptas voluptatum.
    </div>
    <div>Consectetur consequuntur cum cupiditate delectus deserunt dolor doloribus eum, eveniet excepturi hic incidunt
        ipsam, laboriosam laborum maiores minima natus optio perspiciatis possimus quos recusandae rem repellat sed
        soluta, ullam voluptates?
    </div>
    <div>Accusantium ad amet animi aperiam architecto consectetur dignissimos doloremque dolores excepturi inventore
        ipsa iure laborum laudantium molestias nisi nobis odio omnis perferendis praesentium provident quam quasi
        repellat rerum, sapiente soluta!
    </div>
    <div>Animi, aperiam autem beatae corporis culpa cumque debitis delectus dolore dolores ducimus eius enim esse est id
        illum ipsa ipsam nostrum obcaecati odio provident quasi quisquam recusandae reiciendis repellendus sed.
    </div>
    <div>Delectus dolorum error esse fuga impedit molestiae nostrum obcaecati officia pariatur quam. Aspernatur
        assumenda delectus dolor esse ex, fuga illo in molestiae nobis non quaerat quam qui repudiandae, temporibus,
        tenetur?
    </div>
    <div>Adipisci ex exercitationem fuga harum reprehenderit? Cum quibusdam repellendus similique! Architecto assumenda
        consequuntur corporis, culpa dolor et fuga necessitatibus quis soluta voluptas. Blanditiis debitis enim
        inventore possimus velit? Est, perspiciatis.
    </div>
    <div>Commodi excepturi sunt suscipit! A assumenda aut consectetur consequuntur illo labore, qui saepe ut. Aperiam
        assumenda aut, deleniti expedita nulla, odit perspiciatis porro quia repudiandae sed sit soluta tempore
        voluptates?
    </div>
    <div>Ab accusantium aspernatur commodi consequuntur cum cupiditate, dolorem, dolores ducimus eius in inventore
        maiores nulla obcaecati officia provident quaerat quam qui quis, rem repellat repudiandae similique suscipit
        veniam veritatis voluptatem!
    </div>
    <div>Architecto at cupiditate dolor est et, natus omnis voluptate! Atque dignissimos ea explicabo fugit harum ipsa
        iste itaque iure maiores modi molestiae provident, qui quisquam ratione rem soluta totam, voluptate!
    </div>
    <div>A asperiores corporis, earum eius iusto quos voluptas. Assumenda commodi consectetur et quisquam suscipit vel?
        Atque autem cupiditate dolore doloribus excepturi facilis, fuga, iusto molestiae officiis praesentium, quae
        quisquam velit!
    </div>
    <div>A atque corporis ea nostrum perferendis quam quas quisquam saepe ullam, voluptates. At earum est minus modi
        molestiae nobis odit perferendis. Atque commodi dicta, fugit quasi sequi suscipit ullam veritatis.
    </div>
    <div>Culpa doloribus error hic iure, molestias mollitia nesciunt officia praesentium quaerat quam quis quisquam
        rerum sunt. Aliquam, cumque ipsum? Accusamus et labore laudantium neque nihil odit perferendis quibusdam quis
        vero?
    </div>
    <div>Ipsum nam perspiciatis quidem velit. Accusamus aspernatur aut blanditiis commodi consequuntur corporis
        distinctio ea eaque eum harum incidunt, libero magnam magni mollitia nihil obcaecati perspiciatis quam rem
        suscipit, tempora voluptatibus!
    </div>
    <div>Adipisci animi consectetur facere nostrum perspiciatis reprehenderit repudiandae rerum vero? Accusamus ad atque
        delectus doloribus explicabo, illo, inventore modi molestias nam, nostrum numquam omnis perspiciatis placeat
        possimus sint temporibus tenetur.
    </div>
    <div>Accusantium aliquam aliquid assumenda autem consequatur cumque delectus deserunt esse est ex illo in inventore
        itaque laborum, maiores nobis officia omnis possimus repellendus saepe sapiente sit totam voluptatem? Eligendi,
        praesentium!
    </div>
    <div>Aspernatur ipsam neque quod tempore unde? Ab, aliquam autem beatae dolor dolorem eveniet fugit, nam provident
        quas quibusdam soluta voluptas. Explicabo facere laborum nulla perspiciatis possimus quidem repellendus soluta
        unde.
    </div>
    <div>Alias beatae dolore est eveniet ex, excepturi fuga illo itaque iusto magni minus odit omnis perferendis
        praesentium quia quibusdam quisquam! Animi enim impedit nihil quo repellat saepe sequi sint voluptas!
    </div>
    <div>Ab animi aperiam architecto commodi cumque deserunt doloribus eveniet facilis, laborum obcaecati possimus quae
        quisquam, repellat sequi tempora vel veniam. Dolorem dolores omnis perspiciatis sapiente sint vel vero.
        Distinctio, eligendi?
    </div>
    <div>Eaque explicabo illum ipsam laborum officiis sequi ut veritatis. Ad alias amet dolorem ex exercitationem
        facere, in minima molestiae nisi obcaecati qui ratione sapiente, sint sunt tenetur unde vero, vitae!
    </div>
    <div>Animi aperiam aut beatae blanditiis dolor doloribus dolorum esse et fugit hic iusto laudantium libero maiores
        minima nemo nesciunt nisi officia omnis quam quod, repellat similique soluta unde voluptates voluptatibus.
    </div>
    <div>Accusantium aspernatur consectetur corporis culpa cupiditate dignissimos distinctio dolores ducimus earum ex
        explicabo facilis in inventore nam nemo nesciunt odio quaerat quibusdam reprehenderit sapiente similique sunt,
        tempore vitae voluptas voluptates!
    </div>
    <div>Aliquam beatae commodi dolore dolorem earum error esse ipsam minima modi mollitia nemo, neque nulla officiis
        possimus quasi quo ratione reiciendis repudiandae rerum saepe sunt veritatis voluptas voluptatibus. Ipsum,
        officia.
    </div>
    <div>Ab accusamus consectetur corporis dicta dignissimos distinctio error eveniet facilis illo iure libero maiores
        maxime molestias nam necessitatibus officia pariatur, provident recusandae reiciendis repellendus sapiente sit
        soluta tempora. Incidunt, libero!
    </div>
    <div>Blanditiis deleniti ducimus earum ipsum iste, itaque magni, modi natus nobis nostrum saepe soluta tempora.
        Architecto cupiditate dicta distinctio fuga fugiat perspiciatis quibusdam rerum vero. Aliquam animi facere
        facilis harum.
    </div>
    <div>Autem delectus distinctio doloribus ea fugit ipsam, iure molestias nulla, odit, placeat porro quis ratione sit.
        Eum fuga nisi quam! Ad assumenda consequuntur culpa dignissimos inventore magni nemo quisquam sequi.
    </div>
    <div>Consectetur delectus doloremque esse et expedita explicabo fugit hic magnam maiores, modi molestias nobis
        nostrum officiis placeat quasi quibusdam, quis quos veritatis. Assumenda consequatur culpa cumque dolorum
        quibusdam reiciendis voluptate.
    </div>
    <div>Animi asperiores atque consectetur consequuntur cupiditate, dignissimos distinctio doloribus eaque error facere
        id minima molestiae, necessitatibus nulla numquam, pariatur praesentium quia repudiandae sint veritatis!
        Adipisci consectetur earum ipsa recusandae totam.
    </div>
    <div>Autem consequuntur dignissimos dolor enim illum nulla officia perspiciatis quos recusandae veniam. Accusantium,
        aspernatur consequuntur doloremque ipsum nostrum recusandae sequi temporibus totam veritatis voluptatum?
        Architecto est hic omnis suscipit veritatis.
    </div>
    <div>Cupiditate distinctio ex ipsam itaque voluptatem. Aperiam aspernatur at deserunt doloribus dolorum ducimus, ea
        eum facilis illum iure laboriosam molestiae necessitatibus repellat repellendus repudiandae sequi sit. Accusamus
        adipisci ducimus libero.
    </div>
    <div>Ab aperiam, autem consequuntur cum cupiditate dignissimos fuga itaque minus molestias natus nostrum obcaecati
        placeat praesentium quod repellat repellendus saepe suscipit totam voluptas voluptatum. A cupiditate esse
        maiores minima voluptatibus.
    </div>
    <div>A, cum expedita nihil pariatur placeat quos rem suscipit vel. Asperiores atque aut consequatur cum cupiditate
        dolores ea ex exercitationem fugit, labore minus porro quod sapiente, unde veniam veritatis vero?
    </div>
    <div>A ad, beatae dignissimos esse hic impedit maiores molestiae mollitia neque nulla officia officiis provident
        quia quis recusandae vitae voluptatum? Accusantium alias deserunt dicta laudantium porro quia temporibus totam
        veniam.
    </div>
    <div>Ab aliquam atque beatae necessitatibus, nemo odit quam soluta totam voluptas voluptate. Aspernatur dignissimos
        expedita fuga ipsam iusto libero nemo non nostrum officiis temporibus. Exercitationem omnis quo quod repellendus
        sapiente?
    </div>
    <div>Assumenda aut blanditiis consectetur doloremque eos eum expedita libero molestias nemo numquam odit optio
        pariatur possimus quos repellat, repudiandae saepe! Delectus doloremque, dolores excepturi hic labore nobis
        quibusdam sequi vel.
    </div>
    <div>Amet beatae ducimus enim, eveniet hic iste magni, maiores molestias, nobis odio qui quod quos similique
        voluptas voluptatem. Cumque dolorum exercitationem fugiat laborum laudantium, molestiae nobis odit perferendis
        quisquam voluptate.
    </div>
    <div>Accusamus accusantium architecto cupiditate delectus distinctio dolore doloremque harum hic illum in incidunt
        ipsum iusto, nihil numquam optio perferendis praesentium, quod voluptatum. Alias harum in laboriosam maxime non,
        rem temporibus?
    </div>
    <div>Accusamus aliquam amet aspernatur beatae deleniti ducimus, ea expedita explicabo fugit inventore iure laborum
        maxime mollitia quo rerum saepe temporibus? A amet iste magnam nisi non repudiandae velit veniam voluptates!
    </div>
    <div>Cum debitis et, eum harum libero molestiae neque omnis optio sint suscipit tempora unde vitae! Commodi delectus
        dolores, eaque excepturi iste magnam, molestias neque nobis optio totam, unde vero voluptates?
    </div>
    <div>A atque autem corporis deleniti, distinctio explicabo fugiat iure laudantium molestiae nobis nulla provident
        qui quia repellendus repudiandae, temporibus ut? Ab laboriosam quidem ratione, totam vero voluptas! Cumque,
        possimus, quisquam!
    </div></div>
<script>
    window.addEventListener('scroll',function (){
        console.log('页面被滚动了')
    })

    window.addEventListener('resize',function (){
        console.log('窗口大小发生改变')
    })

    let spanE=document.querySelector('span')
    spanE.addEventListener('mouseover',function (){
       console.log('你被盯上了')
    })
    let btnE=document.getElementById('btn');
    //给按钮2添加点击时间 click function(){}是监听到点击事件后的处理函数
    btnE.addEventListener('click',function (){
        alert('按钮2被点击了')
    })
</script>
</body>
</html>